<template>
  <div class="canvascontent">
    <canvas ref="canvas" height="350" width="550" id="mycanvas"></canvas>
    <div>
      <!-- <el-button type="text" @click="handleViewMortgage">查看 </el-button> -->
      <el-button type="" @click="handleDownload" style="margin-top: 20px"
        >下载碳票
      </el-button>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { download } from "../assets/js/fileExport";
import html2canvas from "html2canvas";
import api from "../api/api";
export default {
  setup(prop, context) {
    const userInfojson = localStorage.getItem("userInfo");
    const userInfo = JSON.parse(userInfojson);
    const canvas = ref();
    const usableCarbon = ref(context.attrs.usableCarbon);
    let ctx = ref();
    const ImageUrl = ref("");
    const getNeutralizeData = () => {
      api
        .getListAPI(
          "external/file/getTempFileUrl?fileUrl=file/template/availCarbon.png",
          {}
        )
        .then((res) => {
          ImageUrl.value = res.data;
          initContext();
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    const drawLine = () => {
      ctx.moveTo(100, 100);
      ctx.lineTo(100, 400);
      ctx.stroke();
    };
    const imageUrl = ref("");
    const initContext = () => {
      ctx = canvas.value.getContext("2d");
      var img = new Image();
      console.log(ImageUrl.value);
      img.src = ImageUrl.value;
      img.setAttribute("crossOrigin", "Anonymous");
      img.onload = () => {
        ctx.drawImage(img, 0, 0, 550, 350);
        // ctx.fillStyle = ctx.createPattern(img, "repeat");
        ctx.fillStyle = ctx.createPattern(img, "repeat");
        // ctx.fillRect(100, 100, 200, 200);
        ctx.font = "24px 微软雅黑 bolder";
        // 设置字体颜色
        ctx.fillStyle = "#333333";
        ctx.fillText("碳汇量", 230, 175);
        ctx.fillStyle = "red";
        ctx.font = "18px 微软雅黑 bolder";
        ctx.fillText(usableCarbon.value + " " + "吨", 220, 205);
        ctx.font = "14px 微软雅黑 bolder";
        ctx.fillStyle = "#333";
        ctx.fillText(userInfo.realName, 200, 245);
        ctx.fillStyle = "#333";
        ctx.fillText(userInfo.idNum, 200, 285);
        // ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);
        setTimeout(function () {
          imageUrl.value = canvas.value.toDataURL("image/png", 1.0);
        }, 1000);
        // console.log(imageUrl.value);
      };
    };
    const downloadImagge = (src, name) => {
      const image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        const url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
        const a = document.createElement("a"); // 生成一个a元素
        const event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = src;
    };
    onMounted(() => {
      getNeutralizeData();
      //   drawLine();
    });

    const handleDownload = () => {
      downloadImagge(imageUrl.value, "碳票");
      // html2canvas(canvas.value).then((canvas) => {
      //   let url = canvas.toDataURL("image/png", 1.0);
      //   console.log(url);
      // });
    };
    const handleViewMortgage = () => {
      // window.open(imageUrl.value, "_blank");
    };
    return {
      canvas,
      handleDownload,
      handleViewMortgage,
    };
  },
};
</script>
<style>
.canvascontent {
  text-align: center;
}
</style>